<template>
  <div>
    <home-header></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icons :iconList="iconList"></home-icons>
    <home-recommend :recommendList="recommendList"></home-recommend>
    <home-weekend :weekendList="weekendList"></home-weekend>
  </div>
</template>
<script>
import HomeHeader from "./components/Header";
import HomeSwiper from "./components/Swiper";
import HomeIcons from "./components/Icons";
import HomeRecommend from "./components/Recommend";
import HomeWeekend from "./components/Weekend";
import axios from "axios";
import { mapState } from "vuex";
export default {
  name: "Home",
  components: {
    "home-header": HomeHeader,
    "home-swiper": HomeSwiper,
    "home-icons": HomeIcons,
    "home-recommend": HomeRecommend,
    "home-weekend": HomeWeekend
  },
  data() {
    return {
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: []
    };
  },
  computed: {
    ...mapState({
      curCity: "city"
    })
  },
  mounted() {
    this.lastCity = this.curCity;
    this.getHomeInfo();
  },
  methods: {
    getHomeInfo() {
      axios
        .get("/api/index.json?city=" + this.curCity)
        .then(this.getHomeInfoSuccess);
    },

    getHomeInfoSuccess(res) {
      if (res.data.ret && res.data.data) {
        const data = res.data.data;
        this.swiperList = data.swiperList;
        this.iconList = data.iconList;
        this.recommendList = data.recommendList;
        this.weekendList = data.weekendList;
      }
    }
  },
  activated() {
    if (this.lastCity !== this.curCity) {
      this.lastCity = this.curCity;
      this.getHomeInfo();
    }
  }
};
</script>
